<template>
  <div class="footer">
    <div class="container footer-content flex flex-align-items-center flex-justify-content-around">
      <div class="footer-l">
        <ul>
          <li>
            <router-link to="/foot/problem">Dúvidas comuns - atendimento</router-link>
          </li>
            <li>
                <router-link to="/foot/prepay">Evite Burlas</router-link>
            </li>
          <li>
            <router-link to="/foot/car">Como evitar burlas na compra e venda de automóveis</router-link>
          </li>
        </ul>
        <!-- <ul>
          <li>
            <router-link to="/foot/meal">{{ $t('meal.12') }}</router-link>
          </li>
          <li>
            <router-link to="/foot/ad">Como funciona o Vivebo</router-link>
          </li>
          <li style="color:#595959;display:flex;align-items:center;justify-content:center">
            <span style="cursor:pointer" @click="toAttention">{{ $t('home.6') }}：</span>
            <img style="cursor:pointer" :src="require('@/assets/images/facebook.png')" alt="" @click="toAttention">
          </li>
        </ul> -->
      </div>
      <div class="footer-r">
         <ul>
          <li>
            <router-link to="/foot/meal">Destaques de anúncios</router-link>
          </li>
          <li>
            <router-link to="/foot/recharge">Carregar Conta</router-link>
          </li>
          <li>
            <router-link to="/foot/ad">Como funciona o Vivebo</router-link>
          </li>
        </ul>
        <!-- <ul>
          <li>
            <router-link to="/intro">Livro de Reclamações Online</router-link>
          </li>
          <li>
            <router-link to="/privacy">Configurações de privacidade</router-link>
          </li>
          <li>
            <router-link to="/useage">Termos de Utilização</router-link>
          </li>
          <li>
            <router-link to="/foot/recharge">Carregar Conta</router-link>
          </li>
        </ul> -->
      </div>
      <div class="footer-r">
        <ul>
          <li>
            <router-link to="/privacy">Configurações de privacidade</router-link>
          </li>
          <li>
            <router-link to="/useage">Termos de Utilização</router-link>
          </li>
          <li>
            <router-link to="/foot/about">Sobre Vivebo</router-link>
          </li>
        </ul>
        <!-- <ul>
          <li>
            <router-link to="/foot/problem">Dúvidas comuns - atendimento</router-link>
          </li>
          <li>
            <router-link to="/foot/about">Sobre Vivebo</router-link>
          </li>
            <li>
                <router-link to="/foot/prepay">Evite Burlas</router-link>
            </li>
          <li>
            <router-link to="/foot/car">Como evitar burlas na compra e venda de automóveis</router-link>
          </li>
        </ul> -->
      </div>
      <div class="footer-r">
        <ul>
           <li style="color:#595959;display:flex;justify-content:center;flex-direction: column;">
            <span style="cursor:pointer" @click="toAttention">{{ $t('home.6') }}：</span>
            <img style="cursor:pointer;width:30px;height:30px;margin-top:10px" :src="require('@/assets/images/facebook.png')" alt="" @click="toAttention">
          </li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom"></div>
  </div>
</template>
<script>
export default {
  name: 'CuFooter',
  data() {
    return {};
  },
  methods: {
    toAttention(){
      window.open('https://www.facebook.com/Vivebo-Angola-103164041708508/')
    }
  },
};
</script>
<style lang="scss" scoped>
.footer{
  background-color: #fff;
}
.footer-content {
  padding: 0 40px;
  padding-bottom: 20px;
  box-sizing: border-box;
  background-color: #fff;
  
  // height: 120px;
  .footer-l {
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      li {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 20px;
        a {
          color: #595959;
          line-height: 16px;
          text-decoration: none;
         font-size: 14px;
        }
      }
    }
  }
  .footer-r {
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      li {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 20px;
        a {
          color: #595959;
          line-height: 16px;
          text-decoration: none;
         font-size: 14px;
        }
        span{
           color: #595959;
          line-height: 16px;
          text-decoration: none;
         font-size: 14px;
        }
      }
    }
  }
}
.footer-bottom {
  width: 100%;
  height: 80px;
  background: #fb8c24;
}
</style>
